<template>
  <div class="Courier">
    <div class="top1111">
      <img @click="previous" src="../assets/总图标包含整个系统的/fanhui.png" />
      <span>快递单</span>
      <span></span>
    </div>
    <van-search
      v-model="value"
      shape="round"
      background="#ffffff"
      placeholder="快递单号"
      :show-action="right"
      action-text="搜索"
    />

    <div class="box" v-for="(itme, index) in records" :key="index">
      <div class="top">
        <h5>快递单号:{{ itme.orderCode }}</h5>
        <span><img src="../assets/图标/jiantou.png" alt="" /></span>
      </div>
      <van-card thumb="https://img01.yzcdn.cn/vant/ipad.jpeg">
        <template #tags>
          <p><span class="adsfa">下单时间</span>{{ itme.createTime }}</p>

          <p><span class="adsfa">收货人</span>{{ itme.consignee }}</p>
          <p><span class="adsfa">发货人</span>{{ itme.consignor }}</p>
        </template>
      </van-card>
      <div class="bottom">
        <button
          v-if="itme.star == 0"
          @click="tiao(itme.star, itme.id, itme.orderCode)"
        >
          评价
        </button>
        <button v-else @click="tiao(itme.star, itme.id)">已评价</button>
      </div>
    </div>
  </div>
</template>
 
<script>
import { GetCourierList } from "../request/aip";
export default {
  data() {
    return {
      value: "",
      right: true,
      //  详细数据列表
      records: [],
    };
  },
  methods: {
    tiao(star, id, orderCode) {
      this.$router.push({
        name: "Courierlist",
        params: { id, star, orderCode },
      });
    },
    previous() {
      this.$router.go(-1);
    },
  },
  created() {
    GetCourierList({
      current: 1,
      size: 10,
    }).then((res) => {
      //   console.log(res);
      this.records = res.data.records;
    });
  },
};
</script>
 
<style lang = "less" scoped>
.Courier {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  /* overflow: hidden; */
}
.van-search {
  margin-bottom: 10px;
}
.box {
  margin-bottom: 10px;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background-color: #fff;
    border-bottom: 1px solid #f6f6f6;
    h5 {
      color: #5b5b5b;
    }
    span {
      img {
        display: block;
        height: 13px;
        width: 13px;
      }
    }
  }
  .van-card {
    background-color: #fff;
  }
  .bottom {
    background-color: #fff;
    text-align: right;
    padding: 8px 10px 8px 0;
    border-top: 1px solid #f6f6f6;
    border-bottom: 1px solid #f6f6f6;
    button {
      padding: 6px 25px;
      background-color: #ffcc33;
      color: #fff;
      margin-right: 0;
      border: none;
      border-radius: 22px;
    }
  }
}
.adsfa {
  color: #a7a7a7;
  margin-right: 1em;
}

p {
  margin-top: 5px;
}

.van-card {
  margin-top: 0;
}
.top1111 {
  display: flex;
  background-color: #003399;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 10px;
  span {
    color: #fff;
    font-size: 16px;
  }
  img {
    width: 10px;
    height: 20px;
  }
}
</style>